<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加盟</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div>
        <form>
            <div class="form-group">
                <div class="d-flex flex-row bd-highlight mb-3">
                    <div class="p-2 bd-highlight">
                        <label for="name"><span>*</span> 姓名</label>
                    </div>
                    <div class="p-2 bd-highlight">
                        <input type="text" class="form-control" id="name" placeholder="输入姓名">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="d-flex flex-row bd-highlight mb-3">
                    <div class="p-2 bd-highlight">
                        <label for="phone"><span>*</span>手机号</label>
                    </div>
                    <div class="p-2 bd-highlight">
                        <input type="tel" class="form-control" id="phone" placeholder="输入手机号">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="d-flex flex-row bd-highlight mb-3">
                    <div class="p-2 bd-highlight">
                        <label for="code"><span>*</span>验证码</label>
                    </div>
                    <div class="p-2 bd-highlight">
                        <input type="text" class="form-control code" id="code" placeholder="验证码">
                    </div>
                    <div class="p-2 bd-highlight">
                        <button type="button" class="send  btn-primary" id="send">发送</button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="d-flex flex-row bd-highlight mb-3">
                    <div class="p-2 bd-highlight">
                        <label for="region"><span>*</span>意向地区</label>
                    </div>
                    <div class="p-2 bd-highlight">
                        <input type="text" class="form-control" id="region" placeholder="输入意向地区">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="d-flex flex-row bd-highlight mb-3">
                    <div class="p-2 bd-highlight">
                        <label for="company">企业名称</label>
                    </div>
                    <div class="p-2 bd-highlight">
                        <input type="text" class="form-control" id="company" placeholder="输入企业名称">
                    </div>
                </div>
            </div>
            <div class="form-group text-center">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua"
        crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function () {
        $('#send').click(function () {
            alert('发送成功');
            var time = 60;
            var timer = setInterval(function () {
                time--;
                $('#send').text(time + 's');
                if (time <= 0) {
                    clearInterval(timer);
                    $('#send').text('重新发送');
                }
            }, 1000);
        });
    });
</script>

<style>
    html, body {
        background-image: url('/static/images/jiameng.png');
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: 'Microsoft YaHei', sans-serif;
    }

    .container {
        display: grid;
        place-items: center;
        height: 100vh;
    }

    .send {
        border-radius: 5px;
        width: 70px;
        height: 40px;
    }

    .code {
        width: 100px;
    }

    label {
        line-height: 38px;
        text-align: left;
        width: 80px;
        font-size: 16px;
    }

    .btn {
        width: 80%;
        margin: auto;
    }

    span {
        color: red;
    }

</style>
